<template>
    <div class="frosted-glass">
        <h2>毛玻璃效果</h2>
        <div class="frosted-glass-box">
            <div class="frosted-glass-box-content">这是文字</div>
        </div>
    </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.frosted-glass {
    .frosted-glass-box {
        width: 600px;
        height: 600px;
        color: black;
        font-size: 60px;
        background: url(https://p.qqan.com/up/2022-8/2022815141509020.jpg)
            no-repeat;
        background-size: contain;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        .frosted-glass-box-content {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0);
            backdrop-filter: blur(10px);
        }
    }
}
</style>
